<template>
	<div class="common-layout1" ref="carouselFourc">
		<ScaleScreen
			:width="1920"
			:height="1080"
			class="scale-wrap"
			:fullScreen="true"
		>
			<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
				<control v-if="indexActive == 0" />
			</el-scrollbar>
		</ScaleScreen>
	</div>
</template>
<script>
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";

import control from "../control/index.vue"; //

export default {
	components: {
		ScaleScreen,

		control,
	},
	data() {
		return {
			indexActive: 0,
			timer: false,
		};
	},
	mounted() {},
	beforeDestroy() {
		let self = this;
		clearInterval(this.timer);
		window.removeEventListener("keyup", self.keyTagfunction);
	},
	methods: {
		keyTagfunction(e) {
			if (e && e.keyCode == "27") this.$router.push({ path: "/home" });
		},
		changeLB(newVal, oldVal) {
			this.indexActive = newVal;
		},
		delHandleMouseEnter() {
			this.$refs.carousel.handleMouseEnter = () => {};
		},
	},
};
</script>
<style lang="scss">
.el-carousel {
	width: 100%;
	height: 100%;
}

.el-carousel__container,
.el-carousel-item {
	width: 100%;
	height: 100%;
	background-color: #050614;
}
.el-scrollbar__view {
	height: 100%;
}

.timers1 {
	position: absolute;
	right: 10px;
	top: 10px;
	color: #fff;
	z-index: 11;
	cursor: pointer;
}
</style>
